<template>
  <div class="container" >
    <dialogue-item
      v-for="(item, index) in listData"
      :key="index"
      :self="item.self"
      :time="item.time"
      :avatar="item.avatar"
      :message="item.message">
    </dialogue-item>
    <div class="message_input_wrapper">
      <div class="textarea">
          <textarea
            v-model="text"
            :auto-height="true"
            maxlength="500"
            :fixed="true">
        </textarea>
      </div>
      <div class="submit_wrapper" @click="handleSubmit"  ref="wrapper">
        <img src="/static/images/submit_64x64_00B0FF.png" mode="aspectFit">
      </div>
    </div>
  </div>
</template>

<script>
  /**
   * 讨论
   * @time 2018/04/15
   */
  import DialogueItem from '../../components/discuss/DialogueItem';
  import listData from '../../mock/discuss';
  import { getOneImage, getTime } from '../../mock/index';

  export default {
    data() {
      return {
        text: '',
        listData: listData(),
      };
    },
    components: {
      DialogueItem,
    },

    methods: {
      // 点击发送
      handleSubmit() {
        const text = this.text;
        this.listData = this.listData.concat({
          avatar: getOneImage(),
          time: getTime(),
          message: text,
          self: true,
        });
        this.text = '';
      },
    },
  };
</script>

<style scoped lang="less">
  .container {
    background-color: #eeeeee;
    padding-bottom: 70px;

    .message_input_wrapper {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: row;
      background-color: #ffffff;

      .textarea {
        flex: 1;
        padding: 5px 3px;
        background-color: #cccccc;
        textarea {
          border-radius: 5px;
          background-color: #ffffff;
        }
      }

      .submit_wrapper {
        margin: 5px;
        align-self: flex-start;
        display: flex;
        width: 52px;
        height: 35px;
        border-radius: 6px;
        justify-content: center;
        align-items: center;
        background-color: #ffff;
        box-shadow: #9b9b9b 0 0 2px;

        img {
          width: 35px;
          height: 20px;
        }
      }
    }
  }
</style>
